<template>
  <div>
    <a-row :gutter="[10, 10]">
      <!-- 进行判断显隐 -->
      <!-- 为函数：让判断更加高效 -->
      <!-- 为字符串使用formConfig，同等于optionConfig...操作 -->
      <template v-for="(item, index) in form" :key="item.key">
        <a-col
          v-show="index > 2 && expand ? expandState : true"
          v-if="
            item.if
              ? typeof item.if === 'boolean'
                ? item.if
                : typeof item.if === 'function'
                ? item.if(formParam)
                : typeof item.if === 'string'
                ? formConfig[item.if]
                : true
              : true
          "
          :class="item.class"
          :span="item.colSpan ? item.colSpan : inline ? 6 : 24"
        >
          <a-form-item
            :name="item.key"
            :label="isLabel ? item.title : ''"
            :rules="
              item.rules
                ? findConfig(item.rules, formConfig)
                : {
                    required: findConfig(item.required, formConfig),
                    message:
                      item.m ||
                      item.message ||
                      `${rulesMessage[item.type]}${item.title}`,
                  }
            "
          >
            <slot
              v-if="item.slotName"
              v-bind="item || {}"
              :name="item.slotName"
            />
            <template v-else>
              <template v-if="item.type === 'text'">
                {{ formParam[item.key] }}
              </template>
              <!-- 框架 -->
              <Frames
                v-else
                v-bind="props"
                :data="item"
                :formParam="formParam"
                @changeValue="(data) => emit('changeValue', data)"
              />
            </template>
          </a-form-item>
        </a-col>
      </template>
      <!-- style="text-align: right" -->
      <a-col
        :span="expand && !expandState ? 6 : colSpan || gapSpan"
        v-if="inline"
      >
        <a-form-item>
          <a-button type="primary" @click="emit('query')">查询</a-button>
          <a-button style="margin: 0 8px" @click="emit('reset')"
            >重置
          </a-button>
          <!-- 展开收起 -->
          <a
            v-if="expand"
            @click="expandState = !expandState"
            style="margin-left: 8px"
          >
            {{ expandState ? "收起" : "展开" }}
            <component :is="expandState ? 'up-outlined' : 'down-outlined'" />
          </a>
        </a-form-item>
      </a-col>
    </a-row>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import { propsConfig, findConfig, rulesMessage } from "./utils/index";
import Frames from "./utils/index.vue";

const emit = defineEmits(["changeValue", "query", "reset"]);
const props = defineProps({
  // 是否内联
  inline: { type: Boolean, default: true },
  // 是否需要label
  isLabel: { type: Boolean, default: true },
  // 间隔，查询和重置的col定义
  colSpan: { type: Number },
  ...propsConfig,
});

// 是否展开
const expandState = ref(false);

// 动态计算查询和重置按钮的 span
const gapSpan = computed(() => {
  const { form } = props;
  const length = form.length;
  if (length % 4 === 0) {
    return 24;
  } else if (length % 4 === 1) {
    return 18;
  } else if (length % 4 === 2) {
    return 12;
  } else if (length % 4 === 3) {
    return 6;
  }
});
</script>

<style scoped></style>